<template>
  <div>
    <el-container>
      <el-header>头</el-header>
      <el-main style="background-image: url('http://localhost:8008/imgs/login.jpg');
                    height: 800px;background-size: cover;
                    background-position: center">
        <el-card style="width: 500px;height: 400px;margin:150px auto">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户名注册" name="first">
              <p style="font-size: 30px;margin-left: 160px;margin-top: 0px">注册兜兜集</p>
              <el-form label-width="80px" style="width: 400px;margin: 50px auto" :model="ruleForm" ref="ruleForm">
                <el-form-item label="用户名" >
                  <el-input placeholder="请输入用户名" v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input type="password" placeholder="请输入用户密码" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"  @click="submitForm('ruleForm')">注册</el-button>
                </el-form-item>
                <a href="/frontEnd/userLogin">已有账号,立即登录</a>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="手机号注册" name="second">
                <p style="font-size: 30px;margin-left: 160px;margin-top: 0px">注册兜兜集</p>
                <el-form label-width="80px" style="width: 400px;margin: 50px auto">
                  <el-form-item label="手机号" >
                    <el-input placeholder="请输入手机号"></el-input>
                  </el-form-item>
                  <el-form-item label="验证码">
                    <el-input type="password" placeholder="请输入验证码"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary">注册</el-button>
                  </el-form-item>
                  <a href="/frontEnd/userLogin">已有账号,立即登录</a>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="邮箱注册" name="third">
                <p style="font-size: 30px;margin-left: 160px;margin-top: 0px">注册兜兜集</p>
                <el-form label-width="80px" style="width: 400px;margin: 50px auto">
                  <el-form-item label="邮箱" >
                    <el-input placeholder="请输入邮箱"></el-input>
                  </el-form-item>
                  <el-form-item label="验证码">
                    <el-input type="password" placeholder="请输入验证码"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary">注册</el-button>
                  </el-form-item>
                  <a href="/frontEnd/userLogin">已有账号,立即登录</a>
                </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-main>
      <el-footer style="height: 60px;background-color: white;padding-top: 2px;background-color: rgba(130,129,124,0.25)">
        <Footer/>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Footer from "@/views/common/Footer";
export default {
  components: {Footer},
  data() {
    return {
      activeName: 'first',
      ruleForm: {
        username: '',
        password: ''
      },
    };
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:9090/v1/users/reg/username';
          console.log('url = ' + url);

          this.axios.post(url, this.ruleForm).then((response) => {
            let jsonResult = response.data;
            if (jsonResult.code == 200) {
              this.$message({
                message: '注册成功！',
                type: 'success'
              });
              this.$router.push('/frontEnd/userLogin');
            } else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          });
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style>
a {
  text-decoration: none;
  display:block;
  float: right;

}
</style>